<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="css/ex.css" media="screen,print" />
<link rel="stylesheet" type="text/css" href="/common/css/modules.css" media="screen,print" />
<link rel="stylesheet" type="text/css" href="css/index.css" media="all" />
<script type="text/javascript" src="/common/js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="/common/js/script.js"></script>
<title>Ví dụ tag datalist</title>
<meta name="description" content="Ví dụ về tag datalist trong html, giúp bạn nắm vững cách sử dụng của tag datalist về định nghĩa cũng như cách dùng." />
<meta name="keywords" content="thẻ datalist,the datalist,tag datalist,ví dụ thẻ datalist,vi du the datalist,ví dụ datalist,vi du datalist" />
</head>

<body>
<div id="layout">
<h1><a href="/"><img src="/common/images/logo.gif" alt="Học web chuẩn" /></a></h1>
<h2 class="bHeadEx">Ví dụ tag datalist</h2>
<div id="content">
<p class="pt10">Tag &lt;datalist&gt; được sử dụng cùng với các thành phần <a href="../html5/tag_input.php" class="blue">&lt;input /&gt;</a> nhằm xác định giá trị các thành phần &lt;input /&gt; có thể có (tương tự như <a href="../html5/tag_select.php" class="blue">&lt;select&gt;</a> - <a href="../html5/tag_option.php" class="blue">&lt;option&gt;</a>).</p>

<p>HTML viết như sau:</p>
<div class="sourceTxt">
<p>&lt;input list=&quot;datalistID&quot; /&gt;<br>
&lt;datalist id=&quot;datalistID&quot;&gt;<br>
&lt;option value=&quot;&quot;&gt;&lt;/option&gt;<br>
&lt;/datalist&gt;</p>
</div>

<p class="pt10">Một trang đơn giản sử dụng tag &lt;datalist&gt;</p>
<div class="sourceTxt">
<p>&lt;!DOCTYPE HTML&gt;<br>
&lt;html&gt;<br>
&lt;head&gt;&lt;/head&gt;<br>
<br>
&lt;body&gt;<br>
&lt;input list=&quot;html&quot; /&gt;<br>
&lt;datalist id=&quot;html&quot;&gt;<br>
&lt;option value=&quot;Học HTML&quot;&gt;&lt;/option&gt;<br>
&lt;option value=&quot;Tham khảo HTML&quot;&gt;&lt;/option&gt;<br>
&lt;option value=&quot;Ví dụ HTML&quot;&gt;&lt;/option&gt;<br>
&lt;option value=&quot;Thực hành HTML&quot;&gt;&lt;/option&gt;<br>
&lt;/datalist&gt;<br>
&lt;/body&gt;<br>
&lt;/html&gt;</p>
</div>

<div class="sourceTxt">
<div class="exBrowser">
<input list="html" />
<datalist id="html">
<option value="Học HTML"></option>
<option value="Tham khảo HTML"></option>
<option value="Ví dụ HTML"></option>
<option value="Thực hành HTML"></option>
</datalist>
</div>
</div>
<p class="pageTop"><a href="#layout">Đầu trang</a></p>
<!-- id content --></div>

<div id="sidebar">
<h4 class="sHead">Ví dụ về tag mới HTML5</h4>
<ul class="lNav">
<!--<li><a href="html5_layout.html" target="_blank">&lt;article&gt;</a></li>
<li><a href="html5_layout.html" target="_blank">&lt;aside&gt;</a></li>
<li><a href="ex_audio.html">&lt;audio&gt;</a></li>
<li><a href="ex_canvas.html">&lt;canvas&gt;</a></li>
<li><a href="ex_command.html">&lt;command&gt;</a></li>-->
<li><a href="ex_datalist.html">&lt;datalist&gt;</a></li>
<!--<li><a href="ex_details.html">&lt;details&gt; - &lt;summary&gt;</a></li>
<li><a href="ex_embed.html">&lt;embed&gt;</a></li>
<li><a href="ex_figure.html">&lt;figure&gt; - &lt;figcaption&gt;</a></li>
<li><a href="html5_layout.html" target="_blank">&lt;footer&gt;</a></li>
<li><a href="html5_layout.html" target="_blank">&lt;header&gt;</a></li>
<li><a href="ex_hgroup.html">&lt;hgroup&gt;</a></li>
<li><a href="ex_keygen.html">&lt;keygen&gt;</a></li>
<li><a href="ex_mark.html">&lt;mark&gt;</a></li>
<li><a href="ex_meter.html">&lt;meter&gt;</a></li>
<li><a href="html5_layout.html" target="_blank">&lt;nav&gt;</a></li>
<li><a href="ex_output.html">&lt;output&gt;</a></li>
<li><a href="ex_progress.html">&lt;progress&gt;</a></li>
<li><a href="ex_ruby.html">&lt;ruby&gt; - &lt;rp&gt; - &lt;rt&gt;</a></li>
<li><a href="html5_layout.html" target="_blank">&lt;section&gt;</a></li>
<li><a href="ex_source.html">&lt;source&gt;</a></li>
<li><a href="ex_time.html">&lt;time&gt;</a></li>
<li><a href="ex_video.html">&lt;video&gt;</a></li>
<li><a href="ex_wbr.html">&lt;wbr&gt;</a></li>-->
</ul>
<!-- id sidebar --></div>
<!-- id layout --></div>
<div id="footer">
<div id="footerInner">
<p id="copyright">(C) 2011-2021 Học Web Chuẩn All Rights Reserved.</p>
<div class="fSection">
<ul>
<li id="fNavHome"><a href="/">Trang chủ</a></li>
<li id="fNavAbout"><a href="/about.php">Giới thiệu</a></li>
<li id="fNavContact"><a href="/contact/index.php">Góp ý - Liên hệ</a></li>
<li id="fNavSitemap"><a href="/sitemap/">Site map</a></li>
</ul>
</div>
</div>
<!-- / id footer --></div>
</body>
</html>
